<template>
  <Layout :showHome="Myshow" :showH="false" :showD="true" class="mybackgrund">
    <!-- 设置弹出框 -->
    <van-popup
      v-model="right"
      position="right"
      :style="{ height: '100%', width: '70%' }"
    >
      <p>我的设置</p>
      <div class="cebian">
        <van-cell title="手机号修改" is-link />
        <van-switch v-model="checked" size="24px" />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
        <van-cell title="手机号修改" is-link />
      </div>
    </van-popup>
    <!-- 顶部设置图标 -->
    <van-icon class="set" name="setting-o" @click="righEvt" />
    <!-- 控制加载页面切换 -->
    <div v-show="Myshow">
      <div class="top">
        <!-- 头像上传 -->
        <div class="tp">
          <van-uploader v-model="fileList" multiple :max-count="1">
          </van-uploader>
        </div>
        <!-- <van-uploader :after-read="afterRead" /> -->
        <span>{{ name }}</span>
      </div>
      <div class="bigBox">
        <div class="money">
          <div class="topbox">
            <!-- 钱包 -->
            <p class="moneyBox">我的钱包2版本</p>
            <span class="lockMoney">￥{{ money }}</span>
            <van-button
              icon="balance-pay"
              type="primary"
              class="getmoney"
              plain
              color="#3d8cf7"
              @click="$router.push('/money')"
              >查看钱包</van-button
            >
          </div>
        </div>
        <!-- 任务列表 -->
        <div class="task">
          <p @click="getTask">进行中的业务</p>
          <span>{{ progress || 0 }}</span>
          <van-action-sheet
            v-model="task"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @cancel="onCancel"
          />
        </div>
        <!-- 本月已完成 -->
        <div class="accomplish">
          <p @click="lockOver">已完成的业务</p>
          <span>{{ complete || 0 }}</span>
               <van-action-sheet
            v-model="overa"
            :actions="actionsa"
            cancel-text="取消"
            close-on-click-action
            @cancel="onCancel"
          />
        </div>
        <!-- 退出登陆导航 -->
        <div class="bottom">
          <van-cell title="实名认证" is-link @click="realName">
            <van-tag v-if="active === 0" type="primary" size="medium"
              >未实名</van-tag
            >
            <van-tag v-else type="warning" size="medium">已实名</van-tag>
          </van-cell>
          <van-cell
            title="个人信息"
            is-link
            @click="$router.push('/message')"
          />
          <van-cell title="就业资格证书" is-link />
          <van-cell title="账单明细" is-link @click="$router.push('/bill')"/>
          <van-cell title="我的合同" is-link @click="sign" />
          <van-cell
            value="退出登陆"
            :before-close="onBeforeClose"
            @click="onBeforeClose"
          />
        </div>
      </div>
    </div>
    <van-loading v-show="loading" size="24px" color="#f56e00"
      >加载中...</van-loading
    >
  </Layout>
</template>

<script>
import { editImgApi, taskApi, usersApi } from "@/apis/myApi";
import { editMoneyApi } from "@/apis/myApi";

export default {
  data() {
    return {
      progress: "",
      complete: "",
      active: "",
      userId: "",
      name: "",
      show: false,
      title: true,
      checked: true,
      img: "",
      src: "",
      upImg: "",
      // 打开任务列表
      task: false,
      overa: false,
      active: "",
      active1: "",
      over: [],
      overb: [],
      all: [],
      list: [],
      actionsa:[],
      actions: [],
      goGo: "",
      fileList: [
        {
          content: this.upImg,
        },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],

      password: "",
      showKeyboard: false,
      money: "",
      // 组件头部
      Myshow: false,
      // 加载图标
      loading: true,
      right: false,
    };
  },
  created() {
    // 获取库中IDname赋值
    this.name = this.$store.getters["common/userInfo"].name;
    this.users();
    this.celaer();
    this.ceshi();
    this.business();
    this.lockTask();
    this.getOver();
  },
  mounted() {
    // this.celaer();
  },
  methods: {
    // 进行中完成的任务
    async business() {
      const result = await taskApi();
      for (let i = 0; i < result.length; i++) {
        if (result[i].status === 1) {
          this.progress++;
        } else if (result[i].status === 2 || result[i].status === 3) {
          this.complete++;
        }
      }
    },
    onCancel() {},
    async ceshi() {
      // 这也去修改数据库中的图片路径
      let newImg = this.fileList[0].content;
      let result = await editImgApi(this.userId, newImg);
      // 这样去给页面赋值
      this.upImg = result.img;
      this.fileList[0].content = this.upImg;
    },

    async users() {
      this.userId = this.$store.getters["common/userId"];
      let result = await usersApi(this.userId);
      this.active = result.active;
      this.name = result.name;

      this.money = Number(result.money).toFixed(2);
    },
    // 查看任务列表
    async lockTask() {
      let result = await taskApi();
      this.all = result;
      this.all.find((it) => {
        if (it.status === 1) {
          this.list.push(it);
        }
      });
      // this.taskNumber = this.list.length;
    },
    // 打开任务列表
    async getTask() {
      this.task = true;
      console.log(this.list);
      let length = this.list.length;
      // console.log(length);
      if (this.actions.length !== length) {
        for (let i = 0; i < this.list.length; i++) {
          let obj = {};
          obj.name = this.list[i].title;
          obj.subname = this.list[i].time;
          this.actions.push(obj);
        }
      } else {
        return;
      }
    },
    // 获取已完成列表
    async getOver() {
      let result = await taskApi();
      this.over = result;
      this.over.find((it) => {
        if (it.status === 2 || it.status === 3) {
          this.overb.push(it);
        }
      });
    },
    // 打开已完成列表
    async lockOver() {
      this.overa = true;
      let length = this.overb.length;
      console.log(this.overb.length,length);
      if (this.actionsa.length !== length) {
        for (let i = 0; i < this.overb.length; i++) {
          let obj = {};
          obj.name = this.overb[i].title;
          obj.subname = this.overb[i].time;
          this.actionsa.push(obj);
        }
      } else {
        return;
      }
    },

    // 侧边栏
    righEvt() {
      this.right = true;
    },
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    // 退出登陆
    onBeforeClose() {
      this.$dialog
        .confirm({
          title: "提示",
          message: "您确认要退出登陆吗",
        })
        .then(() => {
          window.localStorage.removeItem("auto-token");
          window.localStorage.removeItem("phone");
          this.$router.push("/login");
        })
        .catch(() => {
          console.log("取消退出登陆");
        });
    },
    // 实名认证
    async realName() {
      const result = await usersApi(this.userId);
      if (result.active !== 0) {
        this.$toast.success("已完成实名认证");
      } else {
        this.$router.push("/real");
      }
    },
    // 加载登陆界面倒计时切换
    celaer() {
      let _this = this;
      setTimeout(function () {
        _this.loading = false;
        _this.Myshow = true;
      }, 500);
    },
    // 跳转我的合同
    sign() {
      this.$router.push("/sign");
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../style/common.less";

.preview-cover {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}
// 侧边样式
.cebian {
  margin: 20px;
  > .van-cell:nth-child(3) {
    margin-bottom: 20px;
  }
  > .van-cell:nth-child(8) {
    margin-bottom: 20px;
  }
}
.van-popup--right {
  background-color: rgb(245, 247, 249);
  > p {
    text-align: center;
  }
}
// 设置样式
.set {
  position: fixed;
  top: 20px;
  right: 60px;
  display: block;
  z-index: 20;
}

// 页面进入加载中样式
.van-loading {
  // position: fixed;
  left: 37%;
  top: 35%;
}
// 头部
.top {
  display: block;
  width: 100%;
  height: 15rem;
  background-color: @a1;
  border-radius: 3rem;
  position: fixed;
  top: -6rem;
  > span {
    display: block;
    position: fixed;
    top: 3rem;
    left: 6.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    font-weight: normal;
  }
  .tp {
    position: absolute;
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50px;
    overflow: hidden;
    top: 154px;
    left: 38px;
  }
}
// 最外面的大盒子
.bigBox {
  position: relative;
  top: 5rem;
  margin: 1rem;
  > .bottom .van-cell {
    font-size: 0.6rem;
    font-weight: 600;
  }
  .getmoney {
    position: absolute;
    top: 55px;
    left: 190px;
  }
}
// 钱包
.money {
  display: block;
  margin: auto;
  width: 17rem;
  height: 5rem;
  border-radius: 5px;
  background-color: #fff;
  margin-top: 45px;
  z-index: 1;
  > .topbox {
    margin: auto;
    width: 15rem;
    height: 4rem;
    // background-color: red;
    > .lockMoney {
      display: block;
      width: 14rem;
      font-size: 1.5rem;
      font-weight: 400;
      border-bottom: solid 0.1rem rgb(248, 248, 248);
    }
    > .moneyBox {
      font-size: 0.7rem;
      color: rgb(144, 144, 144);
      font-weight: 600;
    }
  }
  padding-top: 1rem;
  .clear();
}
// 任务
.task {
  width: 30vw;
  height: 5rem;
  background-color: #fff;
  text-align: left;
  // line-height: 100px;
  padding-left: 20px;
  padding-top: 7px;
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 5px #fbc293;
  > p {
    font-size: 0.7rem;
    color: rgb(144, 144, 144);
    font-weight: 600;
  }
  > span {
    font-weight: 400;
  }
  float: left;
  margin-bottom: 10px;
}
.accomplish {
  width: 30vw;
  height: 5rem;
  background-color: #fff;
  text-align: left;
  // line-height: 100px;
  padding-left: 20px;
  padding-top: 7px;
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 0px 0px 5px #7db1fa;
  > p {
    font-size: 0.7rem;
    color: rgb(144, 144, 144);
    font-weight: 600;
  }
  > span {
    font-weight: 400;
  }
  float: right;
}
</style>
